<template>
	<el-container style="padding: 20px">
		<el-header>
			<div>
				<el-button type="primary" size="mini" @click="add('新增')" icon="el-icon-circle-plus-outline">新增配置</el-button>
				<el-button type="primary" size="mini" @click="addFlagFunc" icon="iconfont icon-21setting">标识维护</el-button>
			</div>
			<el-form label-width="200px" :style="remindFlag.length ? `width:820px;` : ''">
				<el-form-item label="提醒标识：" style="margin-bottom: 0">
					<el-cascader
						v-model="remindFlag"
						:options="SignList"
						style="width:100%;"
						collapse-tags
						@change="getData(1)"
						size="medium"
						:props="{
							value: 'reminderKey',
							label: 'reminderName',
							children: 'nextRemindTypes',
							multiple: true,
						}"
						clearable
						filterable
					></el-cascader>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="remindFlagChine" label="提醒标识" width="220"> </el-table-column>
				<el-table-column prop="remindTypeChine" label="提醒类型"> </el-table-column>
				<el-table-column prop="emailSubject" label="邮件标题" width="200"> </el-table-column>
				<el-table-column prop="emailContent" label="邮件内容" width="200">
					<template slot-scope="scope">
						<span v-html="scope.row.emailContent"></span>
					</template>
				</el-table-column>
				<el-table-column prop="otherReceiver" label="其他收件人" width="200"> </el-table-column>
				<el-table-column prop="otherCcs" label="其他抄送人" width="190"> </el-table-column>
				<el-table-column prop="remark" label="备注" width="300">
					<template slot-scope="scope">
						<el-popover placement="top-start" width="600" trigger="hover">
							<div class="recevivingHinicom">
								<span v-html="scope.row.remark"></span>
							</div>
							<div slot="reference" class="recevivingHiniSlot">
								<span v-html="scope.row.remark"></span>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="otherMs" label="其他密送人" width="200"> </el-table-column>
				<el-table-column prop="messageContent" label="短信内容" width="200">
					<template slot-scope="scope">
						<span v-html="scope.row.messageContent"></span>
					</template>
				</el-table-column>
				<el-table-column prop="messageAddressee" label="短信收件人" width="200"> </el-table-column>

				<el-table-column prop="remindCategoryChine" label="提醒类别"> </el-table-column>
				<el-table-column prop="baseDate" label="基准日期">
					<template slot-scope="scope">
						<span>{{ scope.row.baseDate }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remindCategoryChine" label="偏移时间" width="80">
					<template slot-scope="scope">
						<div v-if="scope.row.deviationDateInfos && scope.row.deviationDateInfos.length">
							<div v-for="(item, index) in scope.row.deviationDateInfos" :key="index">
								{{ item.deviateDays }}&nbsp;&nbsp;&nbsp;{{ item.time }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="remindClassId" label="发件人级别" width="200">
					<template slot-scope="scope">
						<span v-if="SenderList.find(item => item.classificationId === scope.row.remindClassId)">{{
							SenderList.find(item => item.classificationId === scope.row.remindClassId).classificationName
						}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="receiverGroupId" label="收件人群组" width="200">
					<template slot-scope="scope">
						<span v-if="emailList.find(item => item.receiverGroupId === scope.row.receiverGroupId)">{{
							emailList.find(item => item.receiverGroupId === scope.row.receiverGroupId).receiverGroupName
						}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="ccsGroupId" label="抄送人群组" width="200">
					<template slot-scope="scope">
						<span v-if="emailList.find(item => item.receiverGroupId === scope.row.ccsGroupId)">{{
							emailList.find(item => item.receiverGroupId === scope.row.ccsGroupId).receiverGroupName
						}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="ccsGroupId" label="密送人群组" width="200">
					<template slot-scope="scope">
						<span v-if="emailList.find(item => item.receiverGroupId === scope.row.msGroupId)">{{
							emailList.find(item => item.receiverGroupId === scope.row.msGroupId).receiverGroupName
						}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="address" label="操作" width="180" fixed="right">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="add('删除', scope.row)">删除</el-button>
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="add('编辑', scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-pagination
			background
			:disabled="searchLoading"
			:page-size="paging.size"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
			:current-page="paging.num"
			:page-sizes="paging.sizes"
			layout="sizes,prev,pager,next,jumper,total"
			:total="paging.total"
		/>
		<managerInfo
			:emailList="emailList"
			:SenderList="SenderList"
			:SignList="SignList"
			:title="title"
			:addComShow="addComShow"
			@comIsShow="comIsShow"
			@queryFundManagerList="getData"
			:keys="keys"
			ref="managerInfo"
		/>
		<addFlag :addFlagShow="addFlagShow" @addFlagFunc="addFlagFunc" @queryFundManagerList="GetReminderSign" />
	</el-container>
</template>
<script>
	import { ReminderDel, ReminderPageQueue, ReminderEnum, ReminderSender, ReminderRecipient, ReminderSign } from '@/api/Reminder/index.js'
	import managerInfo from './components/addTask/index'
	import addFlag from './components/addFlag/index'
	import { jsonArray } from '@/api/productApi/file'
	export default {
		name: 'Receiving',
		components: {
			managerInfo,
			addFlag
		},
		data() {
			return {
				title: '新增',
				addComShow: false,
				addFlagShow: false,
				tableData: [],
				keys: {},
				searchLoading: false,
				// 分页配置
				paging: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 20, 50, 100]
				},
				SenderList: [],
				emailList: [],
				SignList: [],
				dimensionalData: [],
				remindFlag: []
			}
		},
		async mounted() {
			await this.GetReminderSign()
			this.getEnumList()
			this.getData()
		},
		methods: {
			addFlagFunc() {
				this.addFlagShow = !this.addFlagShow
			},

			// 改变页数
			handleCurrentChange: function(val) {
				this.paging.num = val
				this.getData()
			},

			// 改变条数
			handleSizeChange: function(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getData()
			},

			async getEnumList() {
				await ReminderEnum(['remindType', 'remindCategory']).then(res => {
					if (res.msgCode === 'Y') {
						this.keys = res.data.body
					}
				})
				await ReminderSender().then(res => {
					if (res.msgCode === 'Y') {
						this.SenderList = res.data.body
					}
				})
				await ReminderRecipient().then(res => {
					if (res.msgCode === 'Y') {
						this.emailList = res.data.body
					}
				})
			},

			async GetReminderSign() {
				await ReminderSign().then(res => {
					if (res.msgCode === 'Y') {
						this.dimensionalData = []
						this.allData(jsonArray(res.data.body))
						this.treeData(res.data.body)
						this.SignList = res.data.body
					}
				})
			},

			treeData(list) {
				list.forEach(item => {
					if (item.nextRemindTypes && !item.nextRemindTypes.length) {
						this.$delete(item, 'nextRemindTypes')
					} else {
						this.treeData(item.nextRemindTypes)
					}
				})
			},

			allData(list) {
				list.forEach(item => {
					this.dimensionalData.push(item)
					if (item.nextRemindTypes && item.nextRemindTypes.length) {
						this.allData(item.nextRemindTypes)
					}
				})
			},

			getData(form) {
				if (form) {
					this.paging.num = 1
				}
				const obj = {
					remindFlags: []
				}
				if (this.remindFlag.length) {
					this.remindFlag.forEach(item => {
						obj.remindFlags.push(item[item.length - 1])
					})
				}
				this.searchLoading = true
				ReminderPageQueue(obj, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							res.data.body.forEach(item => {
								if (item.remindType) {
									const codeList = item.remindType.split(';')
									const nameList = []
									codeList.forEach(items => {
										nameList.push(this.keys.remindType.find(val => val.typeCode === items).typeName)
									})
									item.remindTypeChine = nameList.join('；')
								}
								if (item.remindCategory) {
									const codeList = item.remindCategory.split(';')
									const nameList = []
									codeList.forEach(items => {
										nameList.push(this.keys.remindCategory.find(val => val.typeCode === items).typeName)
									})
									item.remindCategoryChine = nameList.join('；')
								}
								if (item.remindFlag) {
									const codeList = item.remindFlag.split(':')
									const nameList = []
									codeList.forEach(items => {
										if (this.dimensionalData.find(val => val.reminderKey === items)) {
											nameList.push(this.dimensionalData.find(val => val.reminderKey === items).reminderName)
										}
									})
									item.remindFlagChine = nameList.join('-')
								}
							})
							this.paging.total = res.data.page.total
							this.tableData = res.data.body
						} else {
							this.$message({ message: res.msgDesc, customClass: 'el-messageClass', type: 'error' })
						}
					})
					.finally(() => {
						this.searchLoading = false
					})
			},

			comIsShow() {
				this.addComShow = !this.addComShow
			},

			add(title, item) {
				if (title === '新增') {
					this.title = title
					this.comIsShow()
				} else if (title === '编辑') {
					this.title = title
					this.$refs.managerInfo.edit(item)
					this.comIsShow()
				} else if (title === '删除') {
					this.operatorComfirm(() => {
						ReminderDel(item).then(res => {
							if (res.msgCode === 'Y') {
								this.getData()
								this.$message({ showClose: true, message: res.msg, customClass: 'el-messageClass', type: 'success' })
							} else {
								this.$message({ message: res.msgDesc, customClass: 'el-messageClass', type: 'error' })
							}
						})
					}, '删除该配置')
				}
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
